<template>
  <div class="theme-settings-form">
    <el-alert
      v-if="!$theme.enabled"
      title="当前未启用主题，保存主题设置后不会生效，如需开启主题，请在.env文件修改对应配置！"
      type="warning"
      show-icon
      :closable="false"
    />
    <div class="block">
      <h3>基础设置</h3>
      <el-form size="large" :model="settingsForm" label-width="160px">
        <el-form-item label="风格">
          <el-radio-group v-model="settingsForm.mode" @change="changeStyle">
            <el-radio value="light">明亮</el-radio>
            <el-radio value="dark">暗黑</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="主题色">
          <el-color-picker v-model="settingsForm.primaryColor" show-alpha @change="changeValue"/>
        </el-form-item>
        <el-form-item label="主体背景色">
          <el-color-picker v-model="settingsForm.backgroundColor" show-alpha @change="changeValue"/>
        </el-form-item>
        <el-form-item label="默认字体色">
          <el-color-picker v-model="settingsForm.fontColor" show-alpha @change="changeValue"/>
        </el-form-item>
        <el-form-item label="默认边框色">
          <el-color-picker v-model="settingsForm.borderColor" show-alpha @change="changeValue"/>
        </el-form-item>
        <el-form-item label="亮色">
          <el-color-picker v-model="settingsForm.lightColor" show-alpha @change="changeValue"/>
        </el-form-item>
        <el-form-item label="暗色">
          <el-color-picker v-model="settingsForm.darkColor" show-alpha @change="changeValue"/>
        </el-form-item>
        <el-form-item label="灰色">
          <el-color-picker v-model="settingsForm.grayColor" show-alpha @change="changeValue"/>
        </el-form-item>
        <el-form-item label="深灰色">
          <el-color-picker v-model="settingsForm.deepGrayColor" show-alpha @change="changeValue"/>
        </el-form-item>
      </el-form>
    </div>
    <div class="block">
      <h3>头部设置</h3>
      <el-form size="large" :model="settingsForm" label-width="160px">
        <el-form-item label="头部背景色">
          <el-color-picker v-model="settingsForm.headerBackgroundColor" show-alpha @change="changeValue"></el-color-picker>
        </el-form-item>
        <el-form-item label="头部文字色">
          <el-color-picker v-model="settingsForm.headerTextColor" show-alpha @change="changeValue"></el-color-picker>
        </el-form-item>
        <el-form-item label="头部高度">
          <el-input-number
            v-model="settingsForm.headerHeight"
            placeholder="请输入头部高度"
            :controls="false"
            @change="changeValue"
          >
            <template #suffix>px</template>
          </el-input-number>
        </el-form-item>
      </el-form>
    </div>
    <div class="block">
      <h3>表格设置</h3>
      <el-form size="large" :model="settingsForm" label-width="160px">
        <el-form-item label="列头背景色">
          <el-color-picker v-model="settingsForm.tableHeaderBackgroundColor" show-alpha @change="changeValue"></el-color-picker>
        </el-form-item>
        <el-form-item label="列头文字色">
          <el-color-picker v-model="settingsForm.tableHeaderFontColor" show-alpha @change="changeValue"></el-color-picker>
        </el-form-item>
      </el-form>
    </div>
    <div class="block">
      <h3>菜单设置</h3>
      <el-form size="large" :model="settingsForm" label-width="160px">
        <el-form-item label="菜单背景色">
          <el-color-picker v-model="settingsForm.menuBackgroundColor" show-alpha @change="changeValue"></el-color-picker>
        </el-form-item>
        <el-form-item label="菜单悬浮背景色">
          <el-color-picker v-model="settingsForm.menuHoverBackgroundColor" show-alpha @change="changeValue"></el-color-picker>
        </el-form-item>
        <el-form-item label="菜单文字颜色">
          <el-color-picker v-model="settingsForm.menuTextColor" show-alpha @change="changeValue"></el-color-picker>
        </el-form-item>
        <el-form-item label="菜单悬浮文字颜色">
          <el-color-picker v-model="settingsForm.menuTextHoverColor" show-alpha @change="changeValue"></el-color-picker>
        </el-form-item>
        <el-form-item label="选中菜单文字颜色">
          <el-color-picker v-model="settingsForm.menuActiveTextColor" show-alpha @change="changeValue"></el-color-picker>
        </el-form-item>
        <el-form-item label="选中菜单悬浮文字颜色">
          <el-color-picker v-model="settingsForm.menuActiveTextHoverColor" show-alpha @change="changeValue"></el-color-picker>
        </el-form-item>
        <el-form-item label="选中子菜单树背景色">
          <el-color-picker v-model="settingsForm.submenuBackgroundColor" show-alpha @change="changeValue"></el-color-picker>
        </el-form-item>
        <el-form-item label="选中菜单圆角">
          <el-input-number
            v-model="settingsForm.menuActiveRadio"
            placeholder="请输入选中菜单圆角"
            :controls="false"
            @change="changeValue"
          >
            <template #suffix>px</template>
          </el-input-number>
        </el-form-item>
        <el-form-item label="菜单宽度">
          <el-input-number
            v-model="settingsForm.menuWidth"
            placeholder="请输入菜单宽度"
            :controls="false"
            @change="changeValue"
          >
            <template #suffix>px</template>
          </el-input-number>
        </el-form-item>
      </el-form>
    </div>
    <div class="opera-wrap">
      <el-button size="large" @click="reset">重置</el-button>
      <el-button
        size="large"
        type="primary"
        :loading="isWorking"
        @click="save"
      >保存</el-button>
    </div>
  </div>
</template>

<script>
import Theme from '@/core/utils/theme'
import { fetchValueByCode, saveTheme } from '@/api/system/settings'

export default {
  name: 'ThemeSettingsForm',
  data () {
    return {
      isWorking: false,
      settingsCode: 'theme-settings',
      settingsForm: JSON.parse(JSON.stringify(Theme.getDefaultSettings()))
    }
  },
  methods: {
    // 保存数据
    save () {
      if (this.isWorking) {
        return
      }
      this.isWorking = true
      saveTheme({
        code: this.settingsCode,
        name: '主题设置',
        value: JSON.stringify(this.settingsForm)
      })
        .then(() => {
          this.$tip.apiSuccess('主题设置保存成功')
        })
        .catch(e => {
          this.$tip.apiFailed(e)
        })
        .finally(() => {
          this.isWorking = false
        })
    },
    // 重置
    reset () {
      this.settingsForm = JSON.parse(JSON.stringify(Theme.getDefaultSettings()))
      Theme.setTheme(this.settingsForm)
      this.$tip.success('重置完成')
    },
    // 获取数据
    fetchData () {
      fetchValueByCode(this.settingsCode)
        .then(data => {
          if (data == null) {
            return
          }
          const settings = JSON.parse(data)
          // 以页面设置为准进行逐属性填充，避免数据丢失
          for (const key in this.settingsForm) {
            this.settingsForm[key] = settings[key] == null
              ? this.settingsForm[key] : settings[key]
          }
        })
        .catch(e => {
          this.$tip.apiFailed(e)
        })
    },
    // 风格修改
    changeStyle () {
      for (const key in Theme[this.settingsForm.mode]) {
        this.settingsForm[key] = Theme[this.settingsForm.mode][key]
      }
      Theme.setTheme(this.settingsForm)
    },
    // 配置值修改
    changeValue () {
      Theme.setTheme(this.settingsForm)
    }
  },
  created () {
    this.fetchData()
  }
}
</script>

<style scoped lang="scss">
.theme-settings-form {
  // 提醒
  .el-alert {
    margin-bottom: 10px;
  }
  // 设置信息块
  .block {
    padding: 20px;
    background-color: var(--background-color);
    margin-bottom: 20px;
    border-radius: 10px;
    h3 {
      margin: 0 0 20px 0;
    }
    .el-form {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      .el-input-number {
        width: 120px;
      }
    }
  }
  // 操作按钮
  .opera-wrap {
    display: flex;
    justify-content: center;
    .el-button {
      width: 200px;
    }
  }
}
</style>
